<?php
$parentCaption = BUtils::T('loyalty_program_lbl');
$caption = BUtils::T('points_from_customer_lbl');
$this->pageTitle = $caption;

$this->breadcrumbs = array(
	$parentCaption => array('/program'),
	$caption,
);

$points_s_lbl = BUtils::T('points_s_lbl');
$visits_lbl = BUtils::T('visits_lbl');
$cust_default_face = Yii::app()->baseUrl . '/img/user-128.png';
?>
<div class="page-header position-relative">
	<div class="pull-right">
		<a class="btn btn-primary" href="<?php echo Yii::app()->createUrl('/points/to'); ?>">
			<i class="icon-credit-card bigger-120"></i>
			<?php echo BUtils::T('points_to_customer_lbl'); ?>
		</a>
	</div>
	<h1>
		<?php echo $parentCaption; ?>
		<small>
			<i class="icon-double-angle-right"></i>
			<?php echo $caption; ?>
		</small>
	</h1>
</div><!--/.page-header-->

<div class="row-fluid">
	<!-- Message -->
	
	<div class="space-6"></div>
	
	<div class="row-fluid">
		<div class="span6" style="position:relative;">
			<div class="widget-box transparent" id="sticky-left">
				<div class="widget-header">
					<h3 class="lighter green"><i class="icon-signout"></i> <?php echo $caption; ?></h3>
				</div>
				<div class="widget-body">
					<div class="widget-body-inner">
						<div class="widget-main" style="padding:0; padding-top:12px;">
							<div class="well bg-green">
<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'redeem-form',
	'enableClientValidation'=>true,
	'clientOptions'=>array(
		'validateOnSubmit'=>true,
	),
)); ?>
	<h4 class="">
		<?php echo BUtils::T('points_lbl'); ?>
	</h4>
	<?php echo $form->textField($model, 'points', array('id'=>'redeem-points', 'class'=>'xlarge span12', 'placeholder'=>BUtils::T('points_how_many_eg'), 'style'=>'height:auto;', 'autocomplete'=>'off')); ?>
	<?php echo $form->error($model,'points', array('id'=>'redeem-points-error')); ?>
	<div class="space-6"></div>
	<h4 class="">
		<?php echo BUtils::T('customer_lbl'); ?>
	</h4>
	<div class="relative">
		<?php echo $form->dropdownList($model, 'customer', array(), array('id'=>'redeem-customer', 'class'=>'xlarge', 'placeholder'=>BUtils::T('customer_info_eg'))); ?>
	</div>
	<?php echo $form->error($model,'customer', array('id'=>'redeem-customer-error')); ?>
	<div class="space-6"></div>
	<?php echo CHtml::ajaxSubmitButton(BUtils::T('confirm_btn'), Yii::app()->createUrl($this->id.'/redeem'), array(
		'dataType' => 'html',
		'beforeSend' => 'js:function(){beforeSubmit("#redeem");}',
		'error' => 'js:function(resp){errorSubmit(resp, "#redeem");}',
		'success' => 'js:function(data){afterSubmit(data, "#redeem");}',
	), array('class'=>'btn btn-large btn-info', 'id'=>'redeem-button')); ?>
	<img id="redeem-button-loader" style="display:none;" src="<?php echo Yii::app()->baseUrl; ?>/img/ajax-loaders/ajax-loader-4.gif" />
	<input type="hidden" id="program-ids" name="program-ids" value="" />
<?php $this->endWidget(); ?>
								<hr class="" />
								<div id="redeem-result">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="span6">
			<div class="widget-box transparent">
				<div class="widget-header">
					<h3 class="lighter green"><i class="icon-trophy"></i> <?php echo BUtils::T('loyalty_program_list_lbl'); ?></h3>
					<div class="widget-toolbar">
						<a class="" href="<?php echo Yii::app()->createUrl('/program'); ?>">
							<i class="icon-edit"></i> <?php echo BUtils::T('loyalty_program_edit_lbl'); ?>
						</a>
					</div>
				</div>
				<div class="widget-body">
					<div class="widget-body-inner">
						<div class="widget-main" style="padding:0;">
							<div id="program-list-loader" class="text-center" style="display:none;">
								<img src="<?php echo Yii::app()->baseUrl; ?>/img/ajax-loaders/ajax-loader-4.gif" />
							</div>
							<div id="program-list" style="max-height:480px; overflow:auto;">
								<!-- AJAX Loading -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
jQuery(function() {
	//load program list
	$.ajax({
		'type':'GET', 'url':'<?php echo Yii::app()->createUrl('program/list') ?>', 'data':{'type':'select'},
		'beforeSend':function() {
			$('#program-list-loader').show();
		},
		'success':function(data) {
			$('#program-list-loader').hide();
			$('#program-list').html(data);
		}
	});
	
	//clean error
	$('input[type="text"]').on('blur', function(){
		var errorId = $(this).attr('id') + '-error';
		$('#' + errorId).hide();
	});
	
	//select customer
	$('#redeem-customer').selectize({
		valueField: 'id',
		labelField: 'name',
		searchField: ['id','name','mobile','email'],
		create: true, persist: false,
		render: {
			item: function(item, escape) {
				if (item.img) {
					return '<div class="selected-customer">' +
						'<img class="small-img" src="' + escape(item.img) + '" alt="" /> ' +
						'<span class="small-title">' + escape(item.name) + (item.id ? ' ('+escape(item.hitted)+')' : '') + '</span>' +
					'</div>';
				} else {
					return '<div class="selected-customer">' +
						'<span class="small-title">' + escape(item.name) + '</span>' +
					'</div>';
				}
			},
			option: function(item, escape) {
				if (item.img) {
					return '<table class="table table-hover table-customer" style="margin-bottom:0;"><tr>' +
						'<td class="user" style="width:48px;"><img src="' + escape(item.img) + '" alt="" /></td>' +
						'<td class="uinfo">' +
							'<div class="cust-name"><span class="blue">' + escape(item.name) + '</span></div>' +
							'<div class="cust-contact">' + item.contact + '</div>' +
							'<div class="visit-time">' + escape(item.last_time) + '</div>' +
						'</td>' +
						'<td class="uvisits" style="width:64px;">' +
							'<div class="center text-big blue">' + escape(item.visit_times) + '</div>' +
							'<div class="center"><?php echo $visits_lbl; ?></div>' +
						'</td>' +
						'<td class="upoints" style="width:64px;">' +
							'<div class="center text-big blue">' + escape(item.points) + '</div>' +
							'<div class="center"><?php echo $points_s_lbl; ?></div>' +
						'</td>' +
					'</tr></table>';
				} else {
					return '<table class="table table-hover table-customer" style="margin-bottom:0;"><tr>' +
						'<td class="user" style="width:48px;"><img src="<?php echo $cust_default_face; ?>" alt="" /></td>' +
						'<td class="uinfo">' +
							'<div class="cust-name"><span class="blue">' + escape(item.name) + '</span></div>' +
							'<div class="visit-time"></div>' +
						'</td>' +
					'</tr></table>';
				}
			}
		},
		load: function(query, callback) {
			if (!query.length) return callback();
			$.ajax({
				url:'<?php echo Yii::app()->createUrl('customer/suggest', array('type'=>'json')) ?>',
				data:{'q':query}, dataType: 'json',
				error: function() {
					callback();
				},
				success: function(res) {
					callback(res.customers);
				}
			});
		}
	});
});

function beforeSubmit(eId) {
	$(eId + '-button').attr('disabled', true);
	$(eId + '-button-loader').show();
	$(eId + '-customer-error').html('');
}
function errorSubmit(resp, eId) {
	$(eId + '-button').attr('disabled', false);
	$(eId + '-button-loader').hide();
	var data = JSON.parse(resp.responseText);
	for (var prop in data) {
		$(eId+'-'+prop).focus();
		if (data.hasOwnProperty(prop)){
			$(eId+'-'+prop+'-error').show().html(data[prop][0]);
		}
		return;
	}
}
function afterSubmit(data, eId) {
	$(eId + '-points').val('');
	$(eId + '-button').attr('disabled', false);
	$(eId + '-button-loader').hide();
	$(eId + '-result').html(data);
	$('.program-select.selected').removeClass('selected');//clean the selected class
}

//sum selected points
function selectProgram(e) {
	var _this = $(e);
	if (_this.hasClass('selected')) {
		_this.removeClass('selected');
	} else {
		_this.addClass('selected');
	}
	//sum the points
	var _points = 0;
	$('.program-select.selected').each(function(){
		_points += parseFloat($(this).data('points'));
	});
	$('#redeem-points').val(_points);
	getProgramIds();
}
function getProgramIds(){
	var ids = [];
	$('.program-select.selected').each(function(){
		ids.push($(this).data('id'));
	});
	$('#program-ids').val(ids);
}
</script>